﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Nevia</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/blue.css" id="colors">

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Java Script
================================================== -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.flexslider.js"></script>
<script src="scripts/jquery.selectnav.js"></script>
<script src="scripts/jquery.twitter.js"></script>
<script src="scripts/jquery.modernizr.js"></script>
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jquery.contact.js"></script>
<script src="scripts/jquery.isotope.min.js"></script>
<script src="scripts/jquery.jcarousel.js"></script>
<script src="scripts/jquery.fancybox.min.js"></script>
<script src="scripts/jquery.layerslider.min.js"></script>
<script src="scripts/jquery.shop.js"></script>
<script src="scripts/custom.js"></script>

</head>
<body>

<!-- Wrapper / Start -->
<div id="wrapper">

<!-- Header
================================================== -->
<div id="top-line"></div>

<!-- 960 Container -->
<div class="container">

	<!-- Header -->
	<header id="header">

		<!-- Logo -->
		<div class="ten columns">
			<div id="logo">
				<h1><a href="index.html"><img src="images/logo.png" alt="Nevia Premium Template" /></a></h1>
				<div id="tagline">Template Without Compromises!</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Social / Contact -->
		<div class="six columns">

			<!-- Social Icons -->
			<ul class="social-icons">
				<li class="twitter"><a href="#">Twitter</a></li>
				<li class="facebook"><a href="#">Facebook</a></li>
				<li class="dribbble"><a href="#">Dribbble</a></li>
				<li class="linkedin"><a href="#">LinkedIn</a></li>
				<li class="rss"><a href="#">RSS</a></li>
			</ul>

			<div class="clearfix"></div>

			<!-- Contact Details -->
			<div class="contact-details">Contact Phone: +48 880 440 110</div>

			<div class="clearfix"></div>

			<!-- Search -->
			<nav class="top-search">
				<form action="404-page.html" method="get">
					<button class="search-btn"></button>
					<input class="search-field" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
				</form>
			</nav>

		</div>
	</header>
	<!-- Header / End -->

	<div class="clearfix"></div>

</div>
<!-- 960 Container / End -->


<!-- Navigation
================================================== -->
<nav id="navigation" class="style-1">

<div class="left-corner"></div>
<div class="right-corner"></div>

<ul class="menu" id="responsive">

	<li><a href="index.html"><i class="halflings white home"></i> Home</a></li>

	<li><a href="#"><i class="halflings white file"></i> Features</a>
		<!-- Mega Menu / Start -->
		<ul class="cols3">
			<li class="col3">
				<h4>Two Lists and a Paragraph</h4>
			</li>
			<li class="col1">
				<h5>Page Layouts</h5>
				<ol>
					<li><a href="about.html">About</a></li>
					<li><a href="flexslider.html">FlexSlider</a></li>
					<li><a href="pricing-tables.html">Pricing Tables</a></li>
					<li><a href="elements.html">Elements</a></li>
				</ol>
			</li>
			<li class="col1">
				<h5>Other Pages</h5>
				<ol>
					<li><a href="faq.html">FAQ's</a></li>
					<li><a href="404-page.html">404 Page</a></li>
					<li><a href="left-sidebar.html">Left Sidebar</a></li>
					<li><a href="right-sidebar.html">Right Sidebar</a></li>
				</ol>
			</li>
			<li class="col1">
				<h5>Paragraph</h5>
				<p>This <a href="#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p>
			</li>
		</ul>
		<!-- Mega Menu / End -->
	</li>

	<li><a href="#" id="current"><i class="halflings white cog"></i> Shortcodes</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="elements.html">Elements</a></li>
			<li><a href="icons.html">Icons</a></li>
			<li><a href="pricing-tables.html">Pricing Tables</a></li>
			<li><a href="typography.html">Typography</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="#"><i class="halflings white briefcase"></i> Portfolio</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="portfolio-2.html">2 Columns</a></li>
			<li><a href="portfolio-3.html">3 Columns</a></li>
			<li><a href="portfolio-4.html">4 Columns</a></li>
			<li><a href="single-project.html">Single Project</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>
	
	<li><a href="#"><i class="halflings white shopping-cart"></i> Shop</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="shop.html">Shop</a></li>
			<li><a href="product-page.html">Product Page</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="#"><i class="halflings white pencil"></i> Blog</a>
		<!-- Second Level / Start -->
		<ul>
			<li><a href="blog-large-image.html">Large Image</a></li>
			<li><a href="blog-medium-image.html">Medium Image</a></li>
			<li><a href="blog-post.html">Single Post</a></li>
		</ul>
		<!-- Second Level / End -->
	</li>

	<li><a href="contact.html"><i class="halflings white envelope"></i> Contact</a></li>

</ul>
</nav>
<div class="clearfix"></div>


<!-- Content
================================================== -->
<div id="content">


<!-- 960 Container -->
<div class="container floated">

	<div class="sixteen floated page-title">

		<h2>Shortcodes <span>/ Typography</span></h2>

		<nav id="breadcrumbs">
			<ul>
				<li>You are here:</li>
				<li><a href="index.html">Home</a></li>
				<li>Typography</li>
			</ul>
		</nav>

	</div>

</div>
<!-- 960 Container / End -->


<!-- Page Content -->
<div class="page-content">

	<!-- 960 Container -->
	<div class="container">

	<!-- Headlines
	================================================== -->

		<div class="sixteen columns">
			<h1 style="margin-top: -15px;">H1 Header</h1>
			<p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum.</p>

			<div style="margin-top: 20px;"></div>

			<h2>H2 Header</h2>
			<p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tellus eget tempor. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum.</p>

			<div style="margin-top: 20px;"></div>

			<h3>H3 Header</h3>
			<p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque tempor tellus eget pellentesque. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum.</p>

			<div style="margin-top: 20px;"></div>

			<h4>H4 Header</h4>
			<p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor libero. Pellentesque pellentesque tempor tellus eget fringilla. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum.</p>

			<div style="margin-top: 20px;"></div>

			<h5>H5 Header</h5>
			<p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla libero. Pellentesque pellentesque tempor tellus eget. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum.</p>

			<div style="margin-top: 20px;"></div>

			<h6>H6 Header</h6>
			<p>Nulla nunc dui, tristique in semper vel, congue sed ligula. Nam dolor ligula, faucibus id sodales in, auctor fringilla. Pellentesque pellentesque tempor tellus eget libero. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum.</p>
		</div>

	</div>
	<!-- 960 Container / End -->

	<div class="clearfix"></div>
	<!-- Divider -->
	<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Blockquote
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">Blockquote</h3><br />

			<p>Maecenas dolor est, interdum a euismod eu, accumsan posuere nisl. Nam sed iaculis massa. Sed nisl lectus, tempor sed euismod quis, sollicitudin nec est. Suspendisse dignissim bibendum tempor. Nam erat felis, commodo sed semper commodo vel mauris suspendisse dignissim bibendum tempus.</p>
			<blockquote>Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor.</blockquote>
			<p>In ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio, a porttitor metus eros ut enim. Morbi augue velit, tempus mattis dignissim nec, porta sed risus. Donec eget magna eu lorem tristique pellentesque eget eu dui. Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium hendrerit fermentum.</p>
		</div>

	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Dropcap
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">Dropcap</h3><br />
			<p><span class="dropcap">D</span> onec varius condimentum augue, nec mollis risus egestas sit amet. Etiam elit est, tincidunt non tincidunt sit amet, mollis vitae orci. Suspendisse sit amet turpis quam. Sed varius magna nec felis faucibus blandit. Quisque at gravida ante. Phasellus sagittis aliquam sodales. Donec a tortor vitae dolor sagittis aliquam eu id lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac dapibus nisl. Proin in tellus non velit sagittis viverra vel sit amet dui. Cras augue ante, tincidunt consequat ultricies ultricies, tempor a elit. Vestibulum feugiat dapibus tempus. Integer suscipit ipsum sem fermentum bibendum. Vestibulum quam neque, pretium eu consectetur quis, iaculis et massa. Sed consectetur erat fermentum purus condimentum aliquam.</p>
		</div>

	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 20px; margin-bottom: 42px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Hightlights
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">Highlights</h3><br />
			<p>Aliquam sed leo leo, at aliquam felis. Sed sed purus ac <span class="highlight gray">lacus faucibus placerat</span>. Donec hendrerit dapibus justo, bibendum iaculis sem vehicula sed. Fusce dolor orci, eleifend quis dignissim non, tristique sit amet elit. Maecenas semper venenatis felis eu <span class="highlight color">hendrerit in tincidunt</span> vehicula. Cras dictum mi nec dolor  justo lacinia. Nunc at sem lectus, quis <span class="highlight light">aliquam metus</span>. Nam sagittis est at erat tincidunt ut porttitor eros viverra</p>
		</div>

	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 30px; margin-bottom: 42px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- Blockquote
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">Tooltips</h3><br />
			<p>Maecenas dolor est, interdum a euismod eu, <a href="#" class="tooltip" title="First Tooltip">accumsan posuere</a> nisl. Nam sed iaculis massa. Sed nisl lectus, tempor sed euismod quis, sollicitudin nec est. Suspendisse dignissim bibendum tempor. Nam erat felis, commodo sed semper commodo vel mauris <a href="#" class="tooltip" title="Another one here too">suspendisse dignissim</a> bibendum tempus.</p>
		</div>
	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 30px; margin-bottom: 42px;"></div>


	<!-- 960 Container -->
	<div class="container">

	<!-- List Styles
	================================================== -->

		<div class="sixteen columns">
			<!-- Headline -->
			<h3 class="margin-reset">List Styles</h3><br />
		</div>

		<div class="four columns">
			<ul class="check-list">
				<li>Check List lorem ipsum aperia</li>
				<li>Check List lorem ipsum aperia</li>
				<li>Check List lorem ipsum aperia</li>
				<li>Check List lorem ipsum aperia</li>
			</ul>
		</div>

		<div class="four columns">
			<ul class="sign-list">
				<li>Sign List - lorem ipsum aperia</li>
				<li>Sign List - lorem ipsum aperia</li>
				<li>Sign List - lorem ipsum aperia</li>
				<li>Sign List - lorem ipsum aperia</li>
			</ul>
		</div>

		<div class="four columns">
			<ul class="star-list">
				<li>Star List - lorem ipsum aperia</li>
				<li>Star List - lorem ipsum aperia</li>
				<li>Star List - lorem ipsum aperia</li>
				<li>Star List - lorem ipsum aperia</li>
			</ul>
		</div>

		<div class="four columns">
			<ul class="plus-list">
				<li>Plus List - lorem ipsum aperia</li>
				<li>Plus List - lorem ipsum aperia</li>
				<li>Plus List - lorem ipsum aperia</li>
				<li>Plus List - lorem ipsum aperia</li>
			</ul>
		</div>

	</div>
	<!-- 960 Container / End -->


	<!-- Divider -->
	<div class="line" style="margin-top: 35px; margin-bottom: 40px;"></div>


<!-- 960 Container -->
<div class="container">

	<!-- 1/2 -->
	<div class="eight columns">
		<h4>Half Page 1/2</h4>
		<p>Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas pretium feugiat, nibh metus ultricies quam, nec venenatis.</p>
	</div>

	<!-- 1/2 -->
	<div class="eight columns">
		<h4>Half Page 1/2</h4>
		<p>Praesent ut ante id metus sollicitudin sodales. Mauris dictum, lorem quis pretium arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas feugiat, nibh metus ultricies quam, nec venenati.</p>
	</div>
	<!-- 1/2 Columns End -->

</div>
<!-- 960 Container End -->


<br />


<!-- 960 Container -->
<div class="container">

	<!-- 1/3 -->
	<div class="one-third column">
		<h4>One Third 1/3</h4>
		<p>Cras semper facilisis vestibulum. Nam purus magna, venenatis a mollis Quisque metus arcu, condimentum vitae dignissim at, condimentum id dui. Fusce at dui metus. Nulla in purus in mauris luctus gravida.</p>
	</div>

	<!-- 1/3 -->
	<div class="one-third column">
		<h4>One Third 1/3</h4>
		<p>Cras semper facilisis vestibulum. Nam purus magna, venenatis a mollis Quisque metus arcu, condimentum vitae dignissim at, condimentum id dui. Fusce at dui metus. Nulla in purus in mauris luctus gravida.</p>
	</div>

	<!-- 1/3 -->
	<div class="one-third column">
		<h4>One Third 1/3</h4>
		<p>Cras semper facilisis vestibulum. Nam purus magna, venenatis a mollis Quisque metus arcu, condimentum vitae dignissim at, condimentum id dui. Fusce at dui metus. Nulla in purus in mauris luctus gravida.</p>
	</div>

</div>
<!-- 960 Container End -->


<br />


<!-- 960 Container -->
<div class="container">

	<!-- 1/3 -->
	<div class="one-third column">
		<h4>One Third 1/3</h4>
		<p>Magna nisi. Integer ut risus nulla. Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Nullam vitae neque luctus dolor pulvinar condimentum nec sed.</p>
	</div>

	<!-- 2/3 -->
	<div class="two-thirds column">
		<h4>Two Thirds 2/3</h4>
		<p>Magna nisi. Integer ut risus nulla. Aliquam  arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Nullam vitae neque luctus dolor pulvinar condimentum nec sed.</p>
	</div>

</div>
<!-- 960 Container End -->


<br />


<!-- 960 Container -->
<div class="container">

	<!-- 1/4 -->
	<div class="four columns">
		<h4>One Fourth 1/4</h4>
		<p>Magna nisi. Integer ut risus nulla. Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Nullam vitae neque luctus.</p>
	</div>

	<!-- 1/4 -->
	<div class="four columns">
		<h4>One Fourth 1/4</h4>
		<p>Magna nisi. Integer ut risus nulla. Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Nullam vitae neque luctus.</p>
	</div>

	<!-- 1/4 -->
	<div class="four columns">
		<h4>One Fourth 1/4</h4>
		<p>Magna nisi. Integer ut risus nulla. Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Nullam vitae neque luctus.</p>
	</div>

	<!-- 1/4 -->
	<div class="four columns">
		<h4>One Fourth 1/4</h4>
		<p>Magna nisi. Integer ut risus nulla. Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Nullam vitae neque luctus.</p>
	</div>

</div>
<!-- 960 Container End -->


<br />


<!-- 960 Container -->
<div class="container">

	<!-- 1/4 -->
	<div class="twelve columns">
		<h4>One Fourth 1/4</h4>
		<p>Sed at odio ut arcu fringilla dictum eu eu nisl. Donec rutrum erat non arcu gravida porttitor. Nunc et magna nisi.Aliquam at erat in purus aliquet mollis. Fusce elementum velit vel dolor iaculis egestas. Maecenas ut nulla quis eros scelerisque posuere vel vitae nibh. Proin id condimentum sem. Morbi vitae dui in magna vestibulum suscipit vitae vel nunc. Integer ut risus nulla. malesuada tortor, nec scelerisque lorem mattis  lore Aliquam at erat in purus aliquet mollis.</p>
	</div>

	<!-- 3/4 -->
	<div class="four columns">
		<h4>Three Fourth 3/4</h4>
		<p>Magna nisi. Integer ut risus nulla lorem. Aliquam at erat in purus aliquet mollis nullam vitae pulvinar condimentum nec aiquam at erat in purus.</p>
	</div>

</div>
<!-- 960 Container End -->

</div>
<!-- Page Content / End -->


</div>
<!-- Content / End -->

</div>
<!-- Wrapper / End -->


<!-- Footer
================================================== -->

<!-- Footer / Start -->
<footer id="footer">
	<!-- 960 Container -->
	<div class="container">

		<!-- About -->
		<div class="four columns">
			<img id="logo-footer" src="images/logo-footer.png" alt="" />
			<p>Morbi gravida imperdiet rutrum fusce mattis, lectus consequat vestibulum, duinibh fermentum ligula.</p>
		</div>

		<!-- Contact Details -->
		<div class="four columns">
			<h4>Contact Details</h4>
			<ul class="contact-details-alt">
				<li><i class="halflings white map-marker"></i> <p><strong>Address:</strong> 123 Seward Street, Oklahoma City, USA</p></li>
				<li><i class="halflings white user"></i> <p><strong>Phone:</strong> +48 880 440 110</p></li>
				<li><i class="halflings white envelope"></i> <p><strong>Email:</strong> <a href="#">mail@example.com</a></p></li>
			</ul>
		</div>

		<!-- Photo Stream -->
		<div class="four columns">
			<h4>Photo Stream</h4>
			<div class="flickr-widget">
				<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=72179079@N00"></script>
				<div class="clearfix"></div>
			</div>
		</div>

		<!-- Twitter -->
		<div class="four columns">
			<h4>Twitter</h4>
			<ul id="twitter"></ul>
				<script type="text/javascript">
					jQuery(document).ready(function($){
					$.getJSON('http://api.twitter.com/1/statuses/user_timeline/vasterad.json?count=1&callback=?', function(tweets){
					$("#twitter").html(tz_format_twitter(tweets));
					}); });
				</script>
			<div class="clearfix"></div>
		</div>

	</div>
	<!-- 960 Container / End -->

</footer>
<!-- Footer / End -->


<!-- Footer Bottom / Start  -->
<footer id="footer-bottom">

	<!-- 960 Container -->
	<div class="container">

		<!-- Copyrights -->
		<div class="eight columns">
			<div class="copyright">
				© Copyright 2013 by <a href="#">Nevia</a>. All Rights Reserved.
			</div>
		</div>

		<!-- Menu -->
		<div class="eight columns">
			<nav id="sub-menu">
				<ul>
					<li><a href="#">FAQ's</a></li>
					<li><a href="#">Sitemap</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>

	</div>
	<!-- 960 Container / End -->

</footer>
<!-- Footer Bottom / End -->


<!-- Style Switcher
================================================== -->
<link rel="stylesheet" href="css/switcher.css">
<script src="scripts/switcher.js"></script>

<section id="style-switcher">
	<h2>Style Switcher <a href="#"></a></h2>
	<div>
	<h3>Predefined Colors</h3>
		<ul class="colors" id="color1">
			<li><a href="#" class="blue" title="Blue"></a></li>
			<li><a href="#" class="green" title="Green"></a></li>
			<li><a href="#" class="orange" title="Orange"></a></li>
			<li><a href="#" class="navy" title="Navy"></a></li>
			<li><a href="#" class="yellow" title="Yellow"></a></li>
			<li><a href="#" class="peach" title="Peach"></a></li>
			<li><a href="#" class="beige" title="Beige"></a></li>
			<li><a href="#" class="purple" title="Purple"></a></li>
			<li><a href="#" class="red" title="Red"></a></li>
			<li><a href="#" class="pink" title="Pink"></a></li>
			<li><a href="#" class="celadon" title="Celadon"></a></li>
			<li><a href="#" class="brown" title="Brown"></a></li>
			<li><a href="#" class="cherry" title="Cherry"></a></li>
			<li><a href="#" class="gray" title="Gray"></a></li>
			<li><a href="#" class="dark" title="Dark"></a></li>
			<li><a href="#" class="cyan" title="Cyan"></a></li>
			<li><a href="#" class="olive" title="Olive"></a></li>
			<li><a href="#" class="dirty-green" title="Dirty Green"></a></li>
		</ul>

	<h3>Menu Style</h3>
	<select id="menu-style">
		<option value="1">Style 1</option>
		<option value="2">Style 2</option>
	</select>

	<h3>Background Image</h3>
		 <ul class="colors bg" id="bg">
			<li><a href="#" class="bg1"></a></li>
			<li><a href="#" class="bg2"></a></li>
			<li><a href="#" class="bg3"></a></li>
			<li><a href="#" class="bg4"></a></li>
			<li><a href="#" class="bg5"></a></li>
			<li><a href="#" class="bg6"></a></li>
			<li><a href="#" class="bg7"></a></li>
			<li><a href="#" class="bg8"></a></li>
			<li><a href="#" class="bg9"></a></li>
			<li><a href="#" class="bg10"></a></li>
			<li><a href="#" class="bg11"></a></li>
			<li><a href="#" class="bg12"></a></li>
			<li><a href="#" class="bg13"></a></li>
			<li><a href="#" class="bg14"></a></li>
			<li><a href="#" class="bg15"></a></li>
			<li><a href="#" class="bg16"></a></li>
			<li><a href="#" class="bg17"></a></li>
			<li><a href="#" class="bg18"></a></li>
		</ul>
	</div>

	<div id="reset"><a href="#" class="button color blue">Reset</a></div>

</section>
<!-- Style Switcher / End -->


</body>
</html>